<template>
  <view class="main">
    <view class="back"></view>

    <view class="header"
          ref="header"
    >
      <view :style="{height: statusBarHeight + 'px'}"></view>
      <view class="header-title">
        <view
            @click="backRouter"
            style="position: absolute;top: 25rpx;left: 20rpx">
          <u-icon
              name="arrow-left"
              color="#fff" size="34"
          ></u-icon>
        </view>
        用户详情
      </view>
    </view>

    <view :style="{height: statusBarHeight + 'px'}"></view>
    <view style="height: 44px"></view>

    <view class="user-info">
      <u-row gutter="20">
        <u-col span="3">
          <view class="user-icon-box">
            <image
                v-if="mineInfo.fileIdOfAvatar"
                :src="$kt.file.visit(mineInfo.fileIdOfAvatar)"
                mode="aspectFit"
                class="user-icon"
            ></image>
          </view>

        </u-col>
        <u-col span="9">
          <view style="text-align: left">
            <!--用户名 所属单位 职位 学历 入职日期 -->
            <view class="flex-name">{{ mineInfo.mobile }}</view>

            <!--    学历        -->
            <view class="flex-box" >
              <view class="flex-unit">学历:</view>
              <view class="flex-text">{{ empEducation }}</view>
            </view>

            <!--    职位        -->
            <view class="flex-box" >
              <view class="flex-unit">入职时间:</view>
              <view class="flex-text">{{ $kt.date.toCommonFormat(mineInfo.gmtEntry) }}</view>
            </view>


          </view>
        </u-col>
      </u-row>

    </view>

    <scroll-view
        scroll-y
        style="height: calc(100vh - 120px - 44px - 44px - 20px);background-color: #f1f1f1"
    >
      <view class="box">
        <view class="box-title">技能等级</view>
        <view class="split-height"></view>
        <view>
          <u-grid col="3">
            <u-grid-item
                @click="goToSkillDetail(item.id)"
                v-for="(item, index) in mineInfo.mySkillLevelList"
            >
              <view class="in-box" >
                <view>
                  <image
                      :src="$kt.file.visit(item.fileIdOfIcon)"
                      mode="aspectFit"
                      class="box-icon"
                  ></image>
                </view>
                <view class="box-text">{{ item.name }}</view>
              </view>
            </u-grid-item>
          </u-grid>
        </view>
      </view>

      <view class="box">
        <view class="box-title">可以申请等级</view>
        <view class="split-height"></view>
        <view>
          <u-grid col="3">
            <u-grid-item
                @click="goToSkillDetail(item.id)"
                v-for="(item, index) in mineInfo.myCanApplyLevelList"
            >
              <view class="in-box" >
                <view>
                  <image
                      :src="$kt.file.visit(item.fileIdOfIcon)"
                      mode="aspectFit"
                      class="box-icon"
                  ></image>
                </view>
                <view class="box-text">{{ item.name }}</view>
              </view>
            </u-grid-item>
          </u-grid>
        </view>
      </view>

<!--      &lt;!&ndash; 绩效过去时间段的 只有年份加绩效分数 用图标显示 简单折线图 2023 6.5分 2022 7.6分  &ndash;&gt;-->
<!--      <view class="box">-->
<!--        <view class="box-title">绩效</view>-->
<!--        <view class="split-height"></view>-->
<!--      </view>-->

    </scroll-view>

  </view>
</template>

<script>


import UIcon from "../../uni_modules/uview-ui/components/u-icon/u-icon.vue";
import UCol from "../../uni_modules/uview-ui/components/u-col/u-col.vue";
import URow from "../../uni_modules/uview-ui/components/u-row/u-row.vue";
import emp from '@/js/emp.js';
export default {
  components: {URow, UCol, UIcon},
  data() {
    return {
      empId: 0,
      empEducation: '本科',
      mineInfo : {},
      // 状态栏高度
      statusBarHeight: 0,
      // 头部高度
      headerHeight: 0,



    };
  },
  onLoad(options) {
    this.empId = options.empId;
    this.getEmpById();
  },
  mounted() {
    // 设置状态颜色为白色
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
    });
    // 获取状态栏高度
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    // 获取头部高度
    uni.createSelectorQuery().in(this).select('.header').boundingClientRect((data) => {
      this.headerHeight = data.height;
    }).exec();

  },
  methods: {
    getEmpById() {
      //加载中
      uni.showLoading({
        title: '加载中....'
      });
      this.$requestSecurity({
        uri: "/emp/getEmpById",
        data: {
          empId: this.empId
        },
        stateSuccess: (res) => {
          this.mineInfo = res.data;
          this.mineInfo.mySkillLevelList = []
          this.mineInfo.mySkillLevelList.push(this.mineInfo.currentTitleLevel)
          this.mineInfo.mySkillLevelList.push(this.mineInfo.currentExpertTalentLevel)
          this.mineInfo.mySkillLevelList.push(this.mineInfo.currentSkillLevel)
          this.getEmpEducation();
          uni.hideLoading();
        }
      });

    },
    backRouter() {
      console.log("返回")
      //返回上一页
      uni.navigateBack();
    },
    /**
     * 获取学历
     */
    getEmpEducation() {
      this.empEducation = emp.getEmpEducation(this.mineInfo);
    },


  }
}
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  color: #000000;
  background: linear-gradient(135deg, #0B8D80 0%, #1EC4B4 100%);
}

.user-info {
  color: black;
  padding: 40rpx;

}

.back {
  position: fixed;
  height: 100%;
  width: 100%;

  top: 0;
  left: 0;
  z-index: -1;
}

.box {
  padding: 30rpx;
  box-sizing: border-box;
  text-align: center;
}

.main {
  position: absolute;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.bom {
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #f4f4f4;
  height: calc(100vh - 120px - 44px - 44px);
}

.box-title {
  font-size: 24rpx;
  color: #333333;
  text-align: left;
  font-weight: bold;
}

.split-height {
  height: 20rpx;
}

.box-icon {
  width: 70rpx;
  height: 70rpx;
}

.box-text {
  font-size: 24rpx;
  margin-top: 10rpx;
  color: #333333;
  //超出部分隐藏
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.in-box {
  background-color: #FFFFFF;
  width: calc(100% - 40rpx);
  padding: 20rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  margin: 20rpx 20rpx 20rpx 0;
  text-align: center;
}

.header-title {
  position: relative;
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 36rpx;
  color: #ffffff;
}

.flex-name {
  font-size: 32rpx;
  color: #000000;
}

.flex-box {
  color: #000000;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: left;
  margin-top: 20rpx;
}

.flex-unit {

}

.flex-text {
  margin-left: 10px;
}

.user-icon-box {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 1px solid #bdbdbd;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-icon {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
}
</style>
